<template>
    <div id="container"></div>
</template>

<script setup>
// import 'default-passive-events'
import AMapLoader from '@amap/amap-jsapi-loader';
import { onMounted, ref, shallowRef } from 'vue';

window._AMapSecurityConfig = {
    securityJsCode: 'efabf92e5f050e8710346d690845690d',
}
// window._AMapSecurityConfig = {
//     // 安全密钥
//     securityJsCode: "efabf92e5f050e8710346d690845690d",
// }
const map = shallowRef(null);

let emit = defineEmits(["getMapAddress"])

let marker = null
let form = ref({
    lng: "",
    lat: "",
    address: "",
    //地区编码
    adcode: "",
})
let MyMap = null
let geoCoder = null

let initMap = () => {
    AMapLoader.load({
        key: "08e26c9619c36e3316cc6bad348984b1",// 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.Geocoder', "AMap.AutoComplete", "AMap.AutoComplete"],     // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    }).then((AMap) => {
        MyMap = AMap;//保存AMap
        map.value = new AMap.Map("container", {  //设置地图容器id
            viewMode: "2D",    //是否为3D地图模式
            zoom: 13,           //初始化地图级别
            center: [108.282612, 22.877127], //初始化地图中心点位置
            dragEnable: true, //禁止鼠标拖拽
            scrollWheel: true, //鼠标滚轮放大缩小
            doubleClickZoom: true, //双击放大缩小
            keyboardEnable: true, //键盘控制放大缩小移动旋转
        });

        geoCoder = new AMap.Geocoder({
            city: "0771", //城市设为北京，默认：“全国”
        });

        //为地图注册click事件获取鼠标点击出的经纬度坐标
        map.value.on("click", function (e) {
            // console.log(e)
            form.value.lat = e.lnglat.lat
            form.value.lng = e.lnglat.lng
        //    添加之前先移除
            // removeMarker()
             // 点击就标注一下位置
            setMapMarker()
            // document.getElementById("lnglat").value =
            //   e.lnglat.getLng() + "," + e.lnglat.getLat();
        });

    }).catch(e => {
        console.log(e);
    })
}

// 点击就标注一下位置
let setMapMarker = () => {
    map.value.setFitView()
    marker = new MyMap.Marker({
        map: map.value,
        position: [form.value.lng, form.value.lat],
    });
    toGeoCoder()
    map.value.setFitView()
    map.value.add(marker)
}

//  // 清除点
//  let  removeMarker = ()=> {
//       if (marker) {
//         map.value.remove(this.marker);
//       }
//     }

// 把经纬度标转为地址
let toGeoCoder = () => {
    // console.log(form.value.lat, form.value.lng, "我爱你")
    let lnglat = [form.value.lng, form.value.lat];
    // console.log(geoCoder.getAddress)
    geoCoder.getAddress(lnglat, (status, result) => {
        // console.log(status, "status")
        // console.log(result, "result")
        if (status === "complete" && result.regeocode) {
            //   this.form.address = result.regeocode.formattedAddress;
            // console.log(result, "result")
            // console.log(result.regeocode.formattedAddress, "我的妈耶")
            // 获取到的位置地址

            
            form.value.address = result.regeocode.formattedAddress
            console.log(form.value.address,"form.value.address")
            emit("getMapAddress",{address:form.value.address,latitude:form.value.lat,longitude:form.value.lng})
          
        }
    });
    // console.log(form.value.address,"form.value.addres111111111111111111s")
    
}






onMounted(() => {
    initMap()
})


</script>

<style lang="scss" scoped>
#container {
    padding: 0px;
    margin: 0px;
    width: 60%;
    height: 400px;
}
</style>